<template>
	<view class="container">
		<view class="everyday"><text>{{everyday}}</text></view>
		<view class="list">
			<view class="item" v-for="item of navList" :key="item.id">
				<navigator :url="item.url" class="inner">
					<view class="icon">
						<text class="iconfont" :class="item.className"></text>
					</view>
					<view class="name">{{item.name}}</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import Request from 'luch-request'
	const http = new Request()
	export default {
		data(){
			return {
				everyday: '',
				navList: [
					{id: 0, name: '历史上的今天', url: '/pages/history/history', className: 'icon-lishi'},
					{id: 1, name: '机器人聊天', url: '/pages/chat/chat', className: 'icon-mingxing'},
					{id: 2, name: '漂亮妹子图片', url: '/pages/peri/peri', className: 'icon-meinv'},
				],
			}  
		},
		onLoad() {
			this.getEveryday()
		},
		methods: {
			getEveryday(){
				// uni.request({
				// 	url: 'http://api.tianapi.com/txapi/everyday/index',
				// 	data: {
				// 		key: '1c3d62f4f181e071d86ddc5395515d97'
				// 	},
				// 	success: (res) => {
				// 		let data = res.data.newslist[0]
				// 		this.everyday = data.note
				// 	}
				// })
				http.get('txapi/everyday/index', {
					params: {
						key: '1c3d62f4f181e071d86ddc5395515d97'
					}
				}).then(res => {
					let data = res.data.newslist[0]
					this.everyday = data.note
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.everyday{
		padding: 20rpx 20rpx 0 20rpx;
		text{
			background-image: linear-gradient(135deg, deeppink, dodgerblue);
			font-size: 30rpx;
			font-weight: bold;
			-webkit-background-clip: text;
			-moz-background-clip: text;
			background-clip: text;
			box-decoration-break: clone;
			-webkit-box-decoration-break: clone;
			-moz-box-decoration-break: clone;
			color: transparent;
		}
	}
	.list{
		margin: 20rpx;
		height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		white-space: nowrap;
		.item{
			display: inline-block;
			width: 30%;
			height: 300rpx;
			border-radius: 12rpx;
			&:nth-child(1){
				background: linear-gradient(45deg, #f00, #ff8080);
				box-shadow: 5rpx 5rpx 10rpx #551c1c;
				.iconfont{
					color: orange;
				}
			}
			&:nth-child(2){
				background: linear-gradient(45deg, #FF6666, #CC6633);
				box-shadow: 5rpx 5rpx 10rpx #551c1c;
				.iconfont{
					color: #CCCC33;
				}
			}
			&:nth-child(3){
				background: linear-gradient(45deg, #9999FF, #6666FF);
				box-shadow: 5rpx 5rpx 10rpx #551c1c;
				.iconfont{
					color: #FFFFCC;
				}
			}
		}
		.inner{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			.icon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;
			}
			.iconfont{
				font-size: 80rpx;
			}
			.name{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 20rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>